<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<div id="example">
			Hello, xiaohuan!
			<h5>全局组件：</h5>
		  	<global-component-a></global-component-a>
		  	<global-component-a></global-component-a>
		  	<global-component-b></global-component-b>
		  	<h5>局部组件：</h5>
		  	<alone-component-a></alone-component-a>
		  	<alone-component-a></alone-component-a>
		  	<alone-component-b></alone-component-b>
		</div>
		
		<script>
			
			var slice = Array.prototype.slice;
			
			function eachObj(obj, func) {
				for(key in obj) {
					func.call(obj, obj[key], key, obj);
				}
			}
			
			function eachArr(arr, func) {
				for(var i = 0, len = arr.length; i < len; i++) {
					func.call(arr, arr[i], i, arr);
				}
			}
			
			function compile(node, scope) {
				switch(node.nodeType) {
					// node节点
					case 1:
						compileChild(node, scope);
						break;
					// text文本
					case 3:						
//						console.log(node.nodeValue);
						break;
					default:
				}
			}
			
			function compileChild(node, scope) {
				var childNodes = node.childNodes;
				if(childNodes) {
					slice.call(childNodes).forEach(function(currentNode, index) {
						if(isComponent(currentNode, scope)) {
							ComponentHandler(currentNode, scope);		
						}else {
							compile(currentNode, scope);
						}
					})
				}
			}
			
			function isComponent(node, scope) {
				var isComp = false;
				var nodeTag = node.nodeName;
				var windowVueComponents = window.Vue.components;
				var vmAloneComponent = scope.setting.aloneComponent;
				eachArr(windowVueComponents, function(value, index, arr) {
					if(nodeTag.toLowerCase() === value.name) {
						isComp = true;
					}
				});
				eachObj(vmAloneComponent, function(value, key, obj) {
					if(nodeTag.toLowerCase() === value.name) {
						isComp = true;
					}
				});
				return isComp;
			}
			
			function ComponentHandler(node, scope) {
				var nodeTag = node.nodeName;
				var windowVueComponents = window.Vue.components;
				var vmAloneComponent = scope.setting.aloneComponent;
				eachArr(windowVueComponents, function(value, index, obj) {
					if(nodeTag.toLowerCase() === value.name) {
						node.innerHTML = value.template;
					}
				});
				eachObj(vmAloneComponent, function(value, key, obj) {
					if(nodeTag.toLowerCase() === value.name) {
						node.innerHTML = value.template;
					}
				});
			}
			
			var Vue = function(options) {
				this.default = {
					el : 'body',
					aloneComponent: {}
				}
				this.setting = Object.assign(this.default, options == 'undefined' ? {} : options);
				this.init();
			}
			
			Vue.prototype.init = function() {
				var nodeEntry = this.setting.el;
				var nodeWrap = document.querySelector(nodeEntry);
				
				compile(nodeWrap, this);
			}
			
			Vue.components = [];
			
			Vue.component = function(name, options) {
				var obj = [];
				obj.name = name;
				obj.template = options.template;
				if(this.components.indexOf(obj) === -1) {
					this.components.push(obj);
				}
			}
			
			window.Vue = Vue;
			
			// 全局组件注册
			Vue.component('global-component-a', {
			  	template: '<div>A global componentA!</div>'
			})
			Vue.component('global-component-b', {
			  	template: '<div>A global componentB!</div>'
			})
			// 局部组件注册
			var aloneComponentA = {
				name: 'alone-component-a',
				template: '<div>A alone componentA!</div>'
			}
			var aloneComponentB = {
				name: 'alone-component-b',
				template: '<div>A alone componentB!</div>'
			}
			// 创建根实例
			new Vue({
			  el: '#example',
			  aloneComponent: {
			  	'aloneComponentA': aloneComponentA,
			  	'aloneComponentB': aloneComponentB
			  }
			})
			
		</script>
	</body>
</html>
